<template>
    <div style="overflow-y: hidden;">
        <div class="auth-outer">
            <div>
                <div class="auth-item" style="height: calc(100vh - 150px);width: 500px;">
                    <div class="auth-item-header">
                        <el-tag size="large" style="font-size: 13px">当前选择:</el-tag>
                        <el-button type="primary"  @click="handlebatch" size="default">批量改价</el-button>
                        <el-button type="primary"  @click="handleSave" size="default">保存</el-button>
                        <el-button type="primary"  @click="handleDown" size="default">下载</el-button>
                    </div>
                    <el-scrollbar>
                        <div style="margin: 10px 0px 50px 0px;">
                            <slot name="header"></slot>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
            <div class="auth-item" style="height: calc(100vh - 150px);width: calc(100vw - 900px);">

                <el-scrollbar>
                    <div class="auth-title">
                    菜单授权：
                    <el-tooltip effect="dark" content="授权用户在菜单中可操作的范围" placement="right">
                        <el-icon><question-filled /></el-icon>
                    </el-tooltip>
                </div>
                    <div style="margin: 20px 20px 90px 20px;" >
                        <slot name="main"></slot>
                    </div>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name:'PriceLayout',
        methods:{
            handleSave(){
                this.$emit('click-save')
            },
            handleDown(){
                this.$emit('click-down')
            },
            handlebatch(){
                this.$emit('click-batch')
            },
        }
    }
</script>
<style lang="scss" scoped>
    .el-tree{
        width: 100%;
    }
    .auth-title{
        display: flex;
        font-size: 15px;
        background: var(--l-headertitle-bg);
        padding: 15px;
        .el-tooltip{
            cursor: pointer;
        }
    }
    .custom-tree-node{
        .menu-data{
            display: flex;
            margin: 10px 0;
        }
    }
    .auth-outer{
        display: flex;
        column-gap: 10px;
        .auth-item{
            flex: 1;
            background: var(--el-bg-color);
            /*&:last-child{*/
            /*    flex: 2;*/
            /*}*/
            .auth-item-header{
                background: var(--l-headertitle-bg);
                padding: 6.5px 15px;
                display: flex;
                justify-content: space-between;
            }
        }
    }
    .filter-tree{
        ::v-deep(.el-tree-node__content){
            height: 40px;
        }
    }
    .lymenupermisson{
        ::v-deep(.el-tree-node__content){
            height: 30px;
        }
    }
</style>
